<template>
    <div>
        <!-- 面包屑组件 -->
        <Crumbs :img="portrait" text1="账号管理" text2="添加账号" :text3="username"/>
         <div class="change-pwd">
            <h4>修改密码</h4>
            <div class="change-pwd-from">
                <p class="ipt">原密码<el-input v-model="pwd1" placeholder="请输入原密码" show-password clearable @change="testing"></el-input></p>
                <div v-show="oldIsshow" style="color:#f00; font-size:14px">{{oldPwdTips}}</div>
                <p class="ipt">新密码<el-input placeholder="请输入密码" v-model="pwd2" show-password clearable></el-input></p>
                <div v-show="newIsshow" style="color:#f00; font-size:14px">{{newPwdTips}}</div>
                <p class="ipt">确认新密码<el-input placeholder="请输入密码" v-model="pwd3" show-password clearable></el-input></p>  
                <div v-show="newIsshow" style="color:#f00; font-size:14px">{{newPwdTips}}</div>  
            </div>
            <div class="btn">
                <el-button type="primary" class="add-btn" @click="clickChange">确定</el-button>
                <el-button type="success" class="reset-btn" @click="clickReset">重置</el-button>
            </div>
            
        </div>
    </div>
</template>

<script>

    import Crumbs from "../../components/Crumbs"
    import {testingOriginalPwd,changePwd} from "@/apis/api"
    let id=JSON.parse(window.localStorage.getItem("key"))
    let imgUrl=window.localStorage.getItem("imgUrl")
    let account=window.localStorage.getItem("account")
export default {
    components:{
        Crumbs
    },
    data(){
        return{
            portrait:"../assets/imgs/touxiang.jpg",
            username:"",
            pwd1:"",
            pwd2:"",
            pwd3:"",
            oldPwdTips:"",
            oldIsshow:false,
            newPwdTips:"两次输入的密码不一致",
            newIsshow:false
        }
    },
     created(){
      this.portrait=imgUrl
      this.username=account
    },
    methods:{
        //判断原密码是否正确
        testing(){
            testingOriginalPwd({
                oldPwd:this.pwd1,
                id:id
            })
            .then(res=>{
                console.log(res.data)
                if(res.data.code===1){
                    this.oldPwdTips=res.data.msg
                    this.oldIsshow=true
                }else if(res.data.code===0){
                    this.oldIsshow=false
                }
            })
        },
        //修改密码
        clickChange(){
            if(this.pwd2===this.pwd3){
                this.newIsshow=false

                changePwd({
                newPwd:this.pwd2,
                id:id
                })
                .then(res=>{
                    console.log(res.data)   
                    this.$message(res.data.msg);
                    this.$router.push("/")
                })
            }else{
                this.newIsshow=true
            }   
        },
        //重置功能
        clickReset(){
            this.pwd1="";
            this.pwd2="";
            this.pwd3="";
        }
    }
}
</script>

<style lang=less scoped>
    *{
        margin:0;
        padding:0
    }
    .change-pwd{
      margin:20px;
      padding:20px;
      background-color:#fff;
       h4{
        padding-bottom:10px;
        border-bottom:1px solid #eee;
      }
    .change-pwd-from{
          margin-top:15px;
          width:300px;
          font-size:18px;
          color:#666;
          .ipt{
              margin-bottom:15px;
          }
          .el-input{
              margin-top:5px;
          }
      }
      .btn{
          margin-left:30px;
          margin-bottom:20px;
           .reset-btn,.add-btn{
               margin-right:20px;
                height:40px;
                width:80px
            }
      }
    }
</style>